<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>具体信息</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/popper.js/1.15.0/umd/popper.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/4.3.1/js/bootstrap.min.js"></script>
</head>
<body>
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModalCenter">
  活动具体信息
</button>

<!-- Modal -->
<div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog" aria-labelledby="exampleModalCenterTitle" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalCenterTitle">具体信息</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <div style="padding-left:50px;padding-right:50px" >
  <table class="table table-bordered" >
  <tbody>
    <tr>
      <td >活动名称</td>
      <td >你画我猜</td>
    </tr>
    <tr>
      <td >活动规则</td>
      <td >一人通过肢体语言向队友传递词义，依次类推</td>
    </tr>
    <tr>
      <td>组队方式</td>
      <td >自由组队，每队不超7人</td>
    </tr>
     <tr>
      <td >活动开始时间</td>
      <td >2021-7-11 12:00</td>
    </tr>
     <tr>
      <td >活动截止时间</td>
      <td >2021-7-25 12:00</td>
    </tr>
  </tbody>
</table>
</style>
</div>
        
        
        
      </div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
      </div>
    </div>
  </div>
</div>
</body>
</html>